@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3598568_m6681dzp56.css);
@function getvw($w) {
  @return ($w/750) * 100 + vw;
}
.warp {
  header {
    nav {
      display: flex;
      padding: getvw(17) getvw(23) getvw(9) getvw(23);
      align-items: center;
      justify-content: space-between;
      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: getvw(123);
        height: getvw(57);
        border: 1px solid orange;
        border-radius: getvw(20);
        position: relative;

        h4 {
          padding: 0 getvw(25);
          position: absolute;
          margin: getvw(20) auto;
          top: getvw(-50%);
          left: getvw(-50%);
        }
      }
      .area {
        i {
          font-size: getvw(54);
          color: orange;
        }
      }
    }
    .banner {
      margin-top: getvw(20);
      display: flex;
      width: getvw(728);
      height: getvw(170);
      justify-content: space-between;
      align-items: center;
      .img4 {
        display: flex;
        .img1 {
          margin-left: getvw(20);
          img {
            width: getvw(170);
            height: getvw(170);
          }
        }
      }
      .img2 {
        width: getvw(200);
        height: getvw(170);
        justify-content: space-around;
        padding: getvw(20);
        line-height: getvw(60);
      }
      .img3 {
        font-size: getvw(50);
        justify-content: center;
        a {
          color: #ff9344;
        }
      }
    }
    .foot {
      margin-top: getvw(20);
      width: getvw(704);
      height: getvw(151);
      display: flex;
      justify-content: space-between;
      .red {
        margin-right: getvw(46);
        margin-left: getvw(20);
        img {
          width: getvw(195);
          height: getvw(151);
        }
      }
    }
  }
  main {
    h4 {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .top1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(709);
      height: getvw(74);
      margin: getvw(30) auto;

      .top2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(74);
          color: #ff9344;
          padding-right: getvw(20);
        }
      }
      .top3 {
        display: flex;
        align-items: center;
        i {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .box1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(709);
      height: getvw(74);
      margin: getvw(30) auto;

      .box2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(74);
          color: #ff9344;
          padding-right: getvw(20);
        }
      }
      .box3 {
        display: flex;
        align-items: center;
        i {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .son1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(709);
      height: getvw(74);
      margin: getvw(30) auto;

      .son2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(74);
          color: green;
          padding-right: getvw(20);
        }
      }
      .son3 {
        display: flex;
        align-items: center;
        i {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .red1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(709);
      height: getvw(74);
      margin: getvw(30) auto;

      .red2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(74);
          color: aqua;
          padding-right: getvw(20);
        }
      }
      .red3 {
        display: flex;
        align-items: center;
        i {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .blue1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(709);
      height: getvw(74);
      margin: getvw(40) auto;

      .blue2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(74);
          color: #ff9344;
          padding-right: getvw(20);
        }
      }
      .blue3 {
        display: flex;
        align-items: center;
        i {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .book1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(709);
      height: getvw(74);
      margin: getvw(20) auto;

      .book2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(74);
          color: #ff9344;
          padding-right: getvw(20);
        }
      }
      .book3 {
        display: flex;
        align-items: center;
        i {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .text {
      width: getvw(538);
      height: getvw(76);
      display: flex;
      justify-content: space-between;
      margin: 0 auto;

      .box1 {
        width: getvw(147);
        height: getvw(76);
        background-color: #ff9344;
        border-radius: getvw(23);
        display: flex;
        justify-content: center;
        align-items: center;
        a {
          color: aliceblue;
         
        }
      }
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-top: getvw(50);
    background-color: aliceblue;
    .foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(708);
      height: getvw(120);
      margin-left: getvw(20);
      .font1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        p{
          a{
            color: black;
          }
        }
      }
      i {
        font-size: getvw(40);
        color: #ff9344;
      }
    }
  }
}
